<template>
    <div class="personalAll" style="overflow-y:auto;">
        <div class="personalTop">
            <el-avatar :size="160" :src="head" class="head" @click="openFileDialog">
                <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
            </el-avatar>
            <input type="file" ref="fileInput" @change="ChangeHead" style="display: none;" />
            <img src="@/assets/黑猫.png" style="position:absolute;right:100px;top:160px;z-index:10;" />
            <img src="@/assets/别针.png" style="width:140px;position:absolute;left:30px;top:230px;z-index:8;" />
            <h6 class="name">{{ name }}|</h6>
            <el-button type="primary" plain style="position: absolute;top:210px;left:380px;">修改密码</el-button>
            <h6 class="account">{{ account }}</h6>
        </div>
        <div style="height:700px;">
            <History class="history" />
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import History from '@/components/main/HistoryData.vue'
import axios from 'axios';
import { useStore } from 'vuex'
const store = useStore();
const name = ref(sessionStorage.getItem('Name'));
const head = ref(sessionStorage.getItem('Head'));
const account = ref(store.state.UserInformation.Account);
// function ChangeHead(){
//     if (fileInput.value) {
//     fileInput.value.click();
//   } else {
//     alert('修改头像失败')
//   }
// }
import { serverAddress } from '@/config'
const fileInput = ref<HTMLInputElement | null>(null);
function openFileDialog() {
    if (fileInput.value) {  
        fileInput.value.click(); // 现在这里是安全的，因为已经检查了 fileInput.value 不是 null  
      } else {  
        console.error('fileInput is not mounted yet');  
      }  
}
const ChangeHead = async (event: any) => {
    if (!fileInput.value) return;
    const file = (event.target as HTMLInputElement).files?.[0];
    if (!file) return;
    try {
        const formData = new FormData();
        formData.append('file', file); // 假设后端接收的字段名为'file'  
        if (sessionStorage.getItem('ID')) {
            formData.append('userId', sessionStorage.getItem('ID')!);
        } else {
            console.error('找不到用户id');
        }
        axios({
            url: 'https://apifoxmock.com/m2/4743995-0-default/192731962',
            // url:`${serverAddress}/user/changeUserHead`,
            method: 'GET',
            data: formData,
            headers: {
                'Content-Type': 'multipart/form-data',
            },
        }).then((response) => {
            if (response.data.code == 1) {
                sessionStorage.setItem('Head', URL.createObjectURL(file));
                head.value=URL.createObjectURL(file)
                store.state.UserInformation.Head=URL.createObjectURL(file)
                alert('修改头像成功')
            } else {
                alert("修改失败1");
            }
        }).catch((error) => {
            alert("修改失败2");
        })
    } catch (error) {
        console.error('API调用失败', error);
        alert("修改失败3");
    }
}
</script>
<style>
.history {
    width: 95%;
    height: 650px;
    position: relative;
    left: 2.5%;
    top: 25px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0px 25px rgba(0, 20, 230, 0.6);
}

.personalTop {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 40%;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0px 35px rgba(63, 104, 252, 0.6);
}

.head {
    position: absolute;
    top: 110px;
    left: 150px;
}

.name {
    color: white;
    font-size: 40px;
    position: absolute;
    top: 110px;
    left: 380px;
}

.account {
    color: rgb(193, 193, 193);
    position: absolute;
    top: 170px;
    left: 380px;
    font-size: 25px;
}

.personalAll::-webkit-scrollbar {
    width: 0px;
}
</style>